			<html>
			<head>
				<title>CPE Operation Intelligence</title>

				<!-- sb-admin -->
				<link href="imports/sb-admin/css/bootstrap.min.css" rel="stylesheet">
				<link href="imports/sb-admin/css/sb-admin.css" rel="stylesheet">
				<link href="imports/sb-admin/css/plugins/morris.css" rel="stylesheet">
				<link href="imports/sb-admin/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
				<script src="imports/sb-admin/js/jquery-1.11.0.js"></script>
				<script src="imports/sb-admin/js/bootstrap.min.js"></script>

				<!-- Canvas js -->
				<script type="text/javascript" src="imports/canvasjs/canvasjs.min.js"></script>

				<!-- Graph -->
				<script src="elements/charts/js/graph_aps_count.js"></script>
				<script src="elements/charts/js/graph_aps_percentage.js"></script>

				<!-- Slider -->
				<link rel="stylesheet" id="themeCSS" href="imports/jQRangeSlider/css/classic.css">
				<!--<link rel="stylesheet" href="imports/jQRangeSlider/demo/style.css">-->
				<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
				<script src="imports/jQRangeSlider/lib/jquery.mousewheel.min.js"></script>
				<script src="imports/jQRangeSlider/jQAllRangeSliders-min.js"></script>

				<script src="http://code.highcharts.com/highcharts.js"></script>
				<script src="http://code.highcharts.com/modules/exporting.js"></script>

				<script type="text/javascript" src="alerts/alerts.js"></script>
				<script type="text/javascript" src="elements/distribution_table/distribution_table.js"></script>

				<script type="text/javascript">

					var cpe_test=sessionStorage.getItem("cpe_id");
					var design;
					var designpie;
					var query;
					function designgraph(q){
						var cpe_test=sessionStorage.getItem("cpe_id");

						if(q==undefined) {
							q = sessionStorage.getItem("query");
		//alert("undefined is now " + q);
	}
	else {
		sessionStorage.setItem("query",q);
		//alert("setting q " + q);
	}

	$.get( "charts/network_charts.php?opt="+cpe_test+"&query="+q+"&cpe_ssid="+sessionStorage.getItem('cpe_ssid')+"&cpe_mac="+sessionStorage.getItem('cpe_mac'), function( data ) {
		var out = JSON.parse(data);
		var vodafoneseries = jQuery.parseJSON('['+out[0]+']');
		var ptseries = jQuery.parseJSON('['+out[1]+']');
		var nosseries = jQuery.parseJSON('['+out[2]+']');
		var outrosseries = jQuery.parseJSON('['+out[3]+']');
		var timeseries = out[4];

		$(function () {
			Highcharts.setOptions({ colors: ['#ff2424', '#8fbeff', '#212121', '#A3FF47']});
			$('#container').highcharts({
				chart: {
					type: 'area'
				},
				title: {
					text: ''
				},
				xAxis: {
					categories: timeseries,
					tickmarkPlacement: 'on',
					title: {
						enabled: false
					}
				},
				yAxis: {
					title: {
                enabled: true,
                text: '<b>Occupation</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
				},
				tooltip: {
					pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} cpes)<br/>',
					shared: true
				},
				plotOptions: {
					area: {
						stacking: 'percent',
						lineColor: '#ffffff',
						lineWidth: 1,
						marker: {
							lineWidth: 1,
							lineColor: '#ffffff'
						}
					}
				},
				series: [{
					name: 'Vodafone',
					data: vodafoneseries
				}, {
					name: 'PT',
					data: ptseries
				}, {
					name: 'NOS',
					data: nosseries
				}, {
					name: 'Others',
					data: outrosseries	,
	    			visible: false
				}]
			});
		});

	});
	design = setTimeout("designgraph()",60000); // time in milliseconds; this is 5 seconds
	print_table(q,sessionStorage.getItem('cpe_ssid'), sessionStorage.getItem('cpe_mac') , sessionStorage.getItem('cpe_id') );
}

function clearfunc() {
	clearTimeout(design);
	clearTimeout(designpie);
		//alert("clearing") ;
	}

function setcpe(){
	document.getElementById("cpe_label").innerHTML = "<b>SSID: </b>"+sessionStorage.getItem('cpe_ssid')+"<b> MAC:</b> " + sessionStorage.getItem('cpe_mac');
}

	function designgraphpie(q2){

		if(q2==undefined) {
			q2 = sessionStorage.getItem("query2");
		//alert("undefined is now " + q2);
	}
	else {
		sessionStorage.setItem("query2",q2);
		//alert("setting q " + q2);
	}

	$.get( "charts/network_charts_pie.php?opt="+cpe_test+"&query="+q2+"&cpe_ssid="+sessionStorage.getItem('cpe_ssid')+"&cpe_mac="+sessionStorage.getItem('cpe_mac'), function( data ) {
		var out = JSON.parse(data);
		var vodafone = out[0];
		var pt = out[1];
		var nos = out[2];
		var outros = out[3];

		$(function () {
			Highcharts.setOptions({ colors: ['#ff2424', '#8fbeff', '#212121', '#A3FF47']});
			$('#container2').highcharts({
				chart: {
					plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
        	text: ''
        },
        tooltip: {
        	pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
        	pie: {
        		showInLegend: true,
        		allowPointSelect: true,
        		cursor: 'pointer',
        		dataLabels: {
        			enabled: true,
        			format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        			style: {
        				color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        			}
        		}
        	}
        },
        series: [{
        	type: 'pie',
        	name: 'Wifi Distribution share',
        	data: [
        	['Vodafone', vodafone ],
        	['PT', pt ],
        	['NOS', nos ],
        	{
        		name: 'Others',
                y: outros ,
                visible: false
        	}
        	]
        }]
    });
		});
	});
			designpie = setTimeout("designgraphpie()",60000);
		}

</script>

</head>

<body onload="clearfunc();designgraph(2);designgraphpie(2);setcpe();alerts();">

	<div id="wrapper">

		<?php 
		require 'elements/navigation_bar.php';
		echo print_navigation("network_charts");
			       // require 'elements/charts/network.php';
		?>	

		<div id="chart-wrapper">

				<!-- Page Heading -->
				<div class="row">
					<div class="col-md-12">
						<h1 class="page-header">
							<i class="fa fa-fw fa-bar-chart-o">
							</i>
							CPE Distribution
							<small id="cpe_label"></small> 
						</h1>
					</div>
				</div>

						<div class="row clearfix">
							<div class="col-md-12 column">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="alert_php"></div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="notice_php"></div> 
									</div>
								</div>
							</div>
						</div>



				<div class="row clearfix">
					<div class="col-lg-10 column">


								<h3 class="panel-title">

									<legend>Area Chart</legend>
								</h3>


							<div class="panel-body">


								<div class="row">
									<div id="container" style="min-width: 310px; height: 400px; max-width: 1200px; margin: 0 auto">
									</div>
								</div>

							</div>

					</div>
					<div class="col-lg-2 column">
						<fieldset>
							<legend>Options:</legend>
							<div class="span2" style="width:150px;margin:auto;align: center;">
								<button type="button" class="btn btn-primary  btn-block" onclick="clearfunc();designgraph(1);designgraphpie(1)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Minutes</button>
								<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph(2);designgraphpie(2)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Days</button>
								<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph(3);designgraphpie(3)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Weeks</button>
								<br />
							</div>
						</fieldset>
					</div>
				</div>


				<div class="row clearfix">
					<div class="col-lg-10 column">


								<h3 class="panel-title">
									<legend>Pie Chart</legend>
								</h3>

							<div class="panel-body">


								<div class="row">
									<div id="container2" style="min-width: 310px; height: 400px; max-width: 1200px; margin: 0 auto">
									</div>
								</div>

							</div>


					</div>
					<div class="col-lg-2 column">
						
					</div>
				<div class="col-md-10 column">
					<div id="cpe_table" class="row clearfix">
					</div>
				</div>
				</div>

			</div>

</div>

</body>
</html>

